<template>
  <div class="photo-box">
      <div class="title">
         <h3>推荐壁纸</h3>
        <router-link to="/morephoto" tag="span">更多></router-link>
      </div>
      <div class="photo_items">
           <router-link :to="{name:'PhotoInfo',params:{photo_url:item.preview}}" tag="div" class="photo_item" v-for="(item,index) in imgaes_list" :key="index">
          <img v-lazy="item.preview" alt="">
      </router-link>
      </div>
     
  </div>
</template>

<script>
export default {
    data() {
        return {
            imgaes_list:[]
        }
    },
    mounted(){
        // var url='https://realwds-api.vercel.app/360/getAppsByCategory?cid=6&start=0&count=10'
       var url='https://service.picasso.adesk.com/v1/vertical/vertical?limit=50'
        this.$axios.get(url)
        .then(res=>{
            // console.log(res.data.res.vertical);
            this.imgaes_list=res.data.res.vertical
        })
    }
}
</script>

<style scoped>
    .photo-box{
        width: 100%;
        padding: 0px 10px;
        box-sizing: border-box;
    }
    .title{
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .title h3{
        float: left;
    }
    .title span{
        float: right;
    }
    .photo_items{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .photo_item img{
        width: 170px;
        height: 300px;
        border-radius: 5px;
        margin-bottom: 5px;
    }
</style>